import { Card, Tag, Checkbox } from 'myselfantd';
import styles from './index.module.scss';
// import { findAllMachineList } from '@/services/api/enterprise';
import { useEffect, useState } from 'react';
import MachineCard from './MachineCard';
import State from './State';
export default ({ params, onSelectDataChange }: any) => {
  const [data, setData] = useState([] as any);
  const [selectData, setSelectData] = useState([] as any);
  const [machineData, setMachineData] = useState({} as any);
  useEffect(() => {
    getDataList();
  }, []);
  const getDataList = async () => {
    // let { result } = await findAllMachineList({
    //   companyId: params.id,
    //   pageIndex: 1,
    //   pageSize: 100,
    // });
    // let targetObj = {};
    // let selected: any = [];
    // result.allMachinePageList?.data.forEach((item: any) => {
    //   if (item.isAllocate) {
    //     selected.push(item.id);
    //   }
    //   if (targetObj[item.machineryCategoryCode]) {
    //     targetObj[item.machineryCategoryCode].push(item);
    //   } else {
    //     targetObj[item.machineryCategoryCode] = [item];
    //   }
    // });
    // setSelectData(selected);
    // onSelectDataChange(selected);
    // setMachineData(targetObj);
    // setData(result);
  };

  const handleCheckboxChange = (options: any) => {
    setSelectData(options);
    onSelectDataChange(options);
  };
  const handleTagClose = (removedTag: string) => {
    const newTags = selectData.filter((tag: any) => tag !== removedTag);
    setSelectData(newTags);
    onSelectDataChange(newTags);
  };
  const findNameById = (id: string, data: Array<any>, field: any) => {
    if (!id) {
      return '';
    }
    let target = data?.find((item: any) => item[field.id] === id) || {};
    return target[field.name];
  };
  return (
    <div>
      <Checkbox.TabsList selectList={selectData} data={machineData} onChange={handleCheckboxChange}>
        <Card.Checkbox title={<State />} fileld={{ name: 'name', key: 'id', value: 'id' }}>
          <MachineCard />
        </Card.Checkbox>
      </Checkbox.TabsList>
      <div className={styles.selectedTags}>
        已选中{selectData?.length}个：
        {selectData?.map((item: string) => (
          <Tag
            key={item}
            closable
            style={{ marginBottom: '10px' }}
            color="processing"
            onClose={() => handleTagClose(item)}
          >
            {findNameById(item, data.allMachinePageList?.data, { id: 'id', name: 'name' })}
          </Tag>
        ))}
      </div>
    </div>
  );
};
